<?php
declare (strict_types = 1);

namespace app\sk\tpl;
use app\core\Res;


class TableInfo extends Base
{

    public function searchDiv(){

    }
    public function form(){
        $value=
<<<EOF
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            
            <form id="myForm" lay-filter="myForm" class="layui-form toolbar">
			<input id="relation_id" name="relation_id" type="hidden"/>
			<input id="relation_type" name="relation_type" type="hidden"/>
                <div class="layui-form-item" id="search">


					<div class="layui-inline">
						<label class="layui-form-label"><span class="red"></span>客户：</label>
						<div class="layui-input-inline">
							<input type="text"  class="layui-input" id="customer_name" name="customer_name" placeholder="客户名称" autocomplete="off">	
						</div>			
					</div>


					<div class="layui-inline">
						<label class="layui-form-label">关键字：</label>
						<div class="layui-input-inline">
							<input name="keywords" class="layui-input" autocomplete="off" placeholder="输入关键字"/>
						</div>
					</div>

					<div class="layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-inline">
                            <input name="createDateSel" class="layui-input" placeholder="选择日期范围" autocomplete="off"/>
                        </div>
                    </div>
					
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
						<button class="layui-btn icon-btn" lay-filter="mxReset" lay-submit>
							<i class="layui-icon">&#xe669;</i>重置
						</button>
                    </div>
                </div>
            </form>
			<table id="myTable" lay-filter="myTable"></table>
        </div>
    </div>
</div>
EOF;
        return $value;
    }

    public function layuijs($params){
        $value=
<<<EOF
<script type="text/html" id="switchTpl">
  <input type="checkbox" name="cur_status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="cur_status" {{ d.cur_status == 1 ? 'checked' : '' }}>
</script>

<!-- 主表中的操作按钮模版 --> 
<script type="text/html" id="authTbBar">
	<a class="layui-btn layui-btn-xs" lay-event="editAccount">编辑</a>
</script> 
<script>
    
	var curId=0;
	//表格数据
	var tableData=[];

	//获取公司
	function CompanyData(selectData){
			console.log('selectData');
			console.log(selectData);
			if(selectData){
				$("#relation_id").val(selectData.id);
				$("#company_name").val(selectData.company_name);
				$("#relation_type").val(selectData.relation_type);
				$("#customer_name").val('');
			}
	}

	//获取客户
	function CustomerData(selectData){
			if(selectData){
				$("#relation_id").val(selectData.id);
				$("#customer_name").val(selectData.customer_name);
				$("#relation_type").val(customer_relation_type);
				$("#company_name").val('');
			}
	}
	


	//Layui主运行函数
    layui.use(['form','admin','laydate','table','tableEdit','soulTable'], function () {
		var laydate = layui.laydate;
        var table = layui.table,
            soulTable = layui.soulTable,
			tableEdit = layui.tableEdit,
            form = layui.form;
            $ = layui.$;


		$(document).on('click','#company_name',function (obj) {
			formvar=form.val('myForm');
			showCompany(formvar)
		});

		/* 显示公司弹窗 */
        function showCompany(fData='') {
             var layIndex = layer.open({
                type: 2,
                title: '(双击)选择公司',
                shade: 0.5,
                fixed: false,
                area: ['600px', '500px'],
                content: "/finance/input/companyview.html",
                success: function (layero, index) {
                    if(fData){
						console.log(fData);
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(JSON.stringify(fData));//向此iframe层方法 传递参数
                    }
                }
            });
        }

		$(document).on('click','#customer_name',function (obj) {
			formvar=form.val('myForm');
			showCustomer(formvar)
		});

		/* 显示员工弹窗 */
        function showCustomer(fData='') {
             var layIndex = layer.open({
                type: 2,
                title: '(双击)选择客户',
                shade: 0.5,
                fixed: false,
                area: ['90%','90%'],
                content: "/finance/input/customerview.html",
                success: function (layero, index) {
                    if(fData){
						console.log(fData);
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(JSON.stringify(fData));//向此iframe层方法 传递参数
                    }
                }
            });
        }

        /**
		 * 公司下拉框
		 */
        function companylist(){
            //检查项目添加到下拉框中
            $.ajax({
                url: "/finance/option/companylist.html",
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    console.log(data);
                        $.each(data.data, function (index, item) {
                           // console.log(item.company_name);
                            $('#sub_cp_id').append(new Option(item.company_name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            });
        }
        companylist();

        /* 修改状态 */
        form.on('switch(cur_status)', function(obj) {
            changeStatus(obj.elem);

            
            return false;
        });

         /**
		 * 更改状态
		 */
        function changeStatus(selData){
            let formData={};
            formData.id=selData.value;
            formData.cur_status=selData.checked ? 1 : 0;
            var url = "/finance/account/changestatus.html";
            //检查项目添加到下拉框中
            $.ajax({
                data: formData,
                type: "POST",
                dataType: "JSON",
                url: url,
                success: function (result) {
                    if (result.code==1) {             
                        layer.msg(result.msg, {icon: 1});
                    } else {
                        // 提示失败
                        layer.msg(result.msg, {icon: 5, anim: 6});
                    }
                    myTable.reload();
                }
            });
        }

		
		
		

		/* 渲染时间选择 */
        laydate.render({
            elem: 'input[name="createDateSel"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });
		
		

        // 保存

        form.on('submit(btnSave)', function (data) {
            // * 按钮禁用
            var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
            if (isDisabled) {
                return false;
            }
            // * 整合表单数据
            var formData = data.field;
			formData.orderitem=JSON.stringify(tableData);
            // * 确定路径
            var url = "/finance/accountcrm/addaccount.html";

            // * 发起请求

            $.ajax({

                data: formData,

                type: "POST",

                dataType: "JSON",

                url: url,

                beforeSend: function () {
                    // 禁用
                    $("#btnSave").addClass('layui-btn-disabled');
                },
                complete: function () {
                    // 启用
                    $("#btnSave").removeClass('layui-btn-disabled');
                },
                success: function (result) {

                    if (result.code==1) {                            
                        // 刷新列表
						myTable.reload({data:tableData});
                        layer.msg(result.msg);

                    } else {
                        // 提示失败
                        layer.msg(result.msg);
                    }
                }
            }); // end ajax
            return false;

        });

		


	   form.on('submit(addCompany)', function (data) {
			showAddCompany();
        });

	   /* 显示员工表单弹窗 */
	   function showAddCompany() {
             var layIndex = layer.open({
                type: 2,
                title:  '公司账号',
                shade: 0.5,
                fixed: false,
                area: ['95%','95%'],
                content: "/finance/accountcrm/form.html?relation_type="+company_relation_type,
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                }
            });
        }

		form.on('submit(addCustomer)', function (data) {
			showAddCustomerAccount();
        });

	   /* 显示员工表单弹窗 */
	   function showAddCustomerAccount() {
             var layIndex = layer.open({
                type: 2,
                title:  '客户账号',
                shade: 0.5,
                fixed: false,
                area: ['95%','95%'],
                content: "/finance/accountcrm/form.html?relation_type="+customer_relation_type,
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                }
            });
        }

		/* 显示表单弹窗 */
		function showEditAccount(mData='') {
             var layIndex = layer.open({
                type: 2,
                title:  mData.customer_name,
                shade: 0.5,
                fixed: false,
                area: ['90%', '80%'],
                content: "/finance/accountcrm/form.html",
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
					if(mData){
						mData.id=mData.relation_id
						iframe.child(JSON.stringify(mData))//向此iframe层方法 传递参数
					}
                }
            });
        }

        

        

        
		
		//右键菜单配置
		var rightMenu = {
			// 表格内容右键菜单配置
			body: [
				{
				   name: '复制单元格内容',
				   icon: 'layui-icon layui-icon-app',
				   click: function(obj) {
					   soulTable.copy(obj.text);
					   layer.msg('复制成功！');
				   }
				},		
				{
					name: '高亮当前行',
					icon: 'layui-icon layui-icon-light',
					click: function(obj) {
						obj.trElem.css('color', '#ff0000');
						obj.trElem.css('background', '#fff071');
					}
				},
				{
					name: '文字标红',
					icon: 'layui-icon layui-icon-rate-half',
					click: function(obj) {
					  obj.elem.css('color', 'red');
					}
				}
			]
		};
		
		//表格列配置
		var cols = [			
			{field: 'company_name', title: '公司',align:'center',width: 150},	
            {field: 'user_name', title: '创建人',align:'center',width: 120},
			{field: 'customer_name', title: '客户名称',align:'center',width: 90},
            {field: 'account_type_name', title: '账户类型',align:'center',width: 120},
			{field: 'bank_name', title: '开户行',align:'center',event:'bank_name',minWidth:160,sort:true,filter: true},		
			{field: 'account_name', title: '帐户名称',align:'center', width: 180, event:'account_name',sort:true,filter: true},
			{field: 'account', title: '帐户',align:'center', width: 180,event:'account',sort:true,filter: true},	
            {field: 'cur_status', title: '状态',templet: '#switchTpl',align:'center', width: 120},
			{field: 'cdate', title: '创建时间',align:'center', width: 170,event:'cdate',sort:true,filter: true},	
			{fixed: 'right',title: '操作',toolbar: '#authTbBar',align:'center', width: 120}	
		];		
		
		//创建表格
        myTable = table.render({
            elem: '#myTable'
            ,url: "/finance/accountcrm/list.html"
			,data:tableData
			,toolbar: ['<p>',
				'<button type="button" class="layui-btn mgl-20" id="addCustomer" lay-filter="addCustomer" lay-submit><i class="layui-icon">&#xe624;</i>客户账号</button>',
				//'<button type="button" class="layui-btn mgl-20" id="addCompany" lay-filter="addCompany" lay-submit><i class="layui-icon">&#xe624;</i>公司账号</button>',
                '</p>'].join('')
            ,page: {limit: 20}
            ,limits: [20, 50, 100, 200, 500]
			,height: $(document).height() - $('#myTable').offset().top - 50
			,even: true //开启隔行背景
  			//,size: 'sm' //小尺寸的表格
            //,totalRow: true //合计行
			,limit: 20 //分页记录条数
			,autoSort: false
			,contextmenu: rightMenu	//右键菜单	
            ,cols: [cols] //表格列的配置
			,filter: {  //开启表格筛选配置
				items:['column','clearCache'],
				bottom: false,
				cache: true
			}
            ,done: function (res) { //表格创建完毕后的回调方法

				soulTable.render(this);
            },
			parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
			
        });

		/* 表格搜索 */
        form.on('submit(mxTbSearch)', function (data) {
            myTable.reload({where: data.field, page:1,limits:10});
            return false;
        });

		/* 表单重置 */
        form.on('submit(mxReset)', function (data) {
            document.getElementById("myForm").reset();
        });

        
        /* 表格头工具栏点击事件 */
        table.on('toolbar(myTable)', function (obj) {
			formvar=form.val('myForm');
			let params=formatDate(formvar);
			exportExcelUrl="/finance/accountcrm/exportlist.html?"+params;
			console.log(exportExcelUrl);
            
        });
        
		
		editTableCols = myTable.config.cols;
		
		
		
		//***********************************************tableEdit组件 Begin******************************************************
        /**
         * 参数cols是table.render({})中的cols属性值
         * aop代理是基于event点击事件进行操作的，
         * 因此cols中务必开启event点击事件！
         **/
        var aopTable = tableEdit.aopObj(editTableCols); //获取一个aop对象
        /**
         * 注意：
         * 1、 aopTable.on('tool(xxx)',function (obj) {})
         * 2、 table.on('tool(yyy)',function (obj) {})
         * 如果1中的xxx与2中的yyy字符串相同时，
         * 不能同时用，用了会造成后调用者覆盖前调用者。
         * 应该直接用1来代替2，因为1中包含了2中的事件。
         * 如果不相同，则可以同时使用。
         **/
        aopTable.on('tool(myTable)',function (obj) {
			var rowIndex = obj.data.SOUL_ROW_INDEX;
            var field = obj.field; //单元格字段
            var value = obj.value; //修改后的值
            var data = obj.data; //当前行旧数据
            var event = obj.event; //当前单元格事件属性值	
			
            if (obj.event === 'edit') {
				//编辑事件处理
            } else if (obj.event === 'editAccount') { // 
                showEditAccount(obj.data);
            }else if (obj.event === 'del') {
				//删除事件处理
            }else{
				//更新到数据集中
				if(isObject(value)){
				   value = value.value;
				}
				data[field] = value;

				console.log(obj);

				var update = {};
				//把value更新到行中
				update[field] = value;
				obj.update(update);
				/**
				 *说白了，此obj与table.on('tool(tableEvent)',function (obj) {})
				 *中的obj对象是同一个，所以可以如此操作。
				 *
				 * */

				//把最新的数据显示到对应单元格上
				var tableBody = $("tbody").find('tr');
				var tds = tableBody.find('td[data-field="'+field+'"]');
				var thisTd;
				var tdText
				var _ri = 0;
				tds.each(function () {
					if(_ri==rowIndex){
					   $(this).find('div.layui-table-cell').text(value);
					}
					_ri++;
	//				tdText = $(this).find('div.layui-table-cell').text();
	//				console.log(tdText);
				});					
			}		
		
        });	
		//***********************************************tableEdit组件 End******************************************************
		
    });

	
</script>
</body>
</html>
EOF;
        return $value;
    }

    

}